<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<style>
			* {
				margin: 0;
			}

			body {
				height: 10000px;
			}

			.box {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				overflow: scroll;
			}

			.content {
				height: 1000px;
				width: 1000px;
			}

			.two {
				height: 200px;
				width: 200px;
				background: teal;
				margin-top: 1000px;
			}
		</style>
		<div class="box" id="box">
			<div class="content"></div>
		</div>
		<button id="btn1">el.scrollTo</button>
		<button id="btn2">el.scrollBy</button>
		<button id="btn3">el.scrollTop</button>
		<button id="btn4">window.scrollTo</button>
		<button id="btn5">滚动至底部</button>

		<div class="two" id="two"></div>
		<script>
			let box = document.querySelector('#box');

			/* 滚动至什么位置，相对元素顶部和左侧 */
			document.querySelector('#btn1').onclick = function () {
				// box.scroll(0,0)
				// 0r
				box.scrollTo({
					left: 0,
					top: 0,
					behavior: 'smooth', // 平滑滚动
				});
			};

			/* 相对目前的位置滚动 */
			document.querySelector('#btn2').onclick = function () {
				// box.scrollBy(100, 50)
				// 0r
				box.scrollBy({
					left: 10,
					top: 50,
					behavior: 'smooth',
				});
			};

			/* 相对元素顶部，滚动Y轴 */
			document.querySelector('#btn3').onclick = function () {
				box.scrollTop = 100;
				// document.scrollingElement.scrollTop = 100; //滚动整个窗口
			};

			/* 整个窗口滚动，获取元素距离顶部距离滚动，让元素可见 */
			document.querySelector('#btn4').onclick = function () {
				let offset = document.querySelector('#two').offsetTop;
				console.log(offset);
				// window.scrollTo(0,offset)
				// or
				window.scrollTo({
					left: 0,
					top: offset,
					behavior: 'smooth',
				});
			};

			/* 同上，整个窗口滚动，获取窗口内容高度，滚动至底部 */
			document.querySelector('#btn5').onclick = function () {
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				let scrollHeight2 = document.scrollingElement.scrollHeight; // 标准模式返回documentElement，怪异模式返回body；
				console.log(scrollHeight, scrollHeight2);
				window.scrollTo({
					left: 0,
					top: scrollHeight2,
				});
			};

			// 判断浏览器已滚动到底部
			window.addEventListener('scroll', () => {
				let { scrollTop, scrollHeight, clientHeight } = document.scrollingElement;
				// or
				// const clientHeight = document.documentElement.clientHeight;
				// const scrollTop = document.documentElement.scrollTop;
				// const scrollHeight = document.documentElement.scrollHeight;

				// 当前滚动高度 + 视口高度 >= 文档总高度
				if (scrollTop + clientHeight >= scrollHeight) {
					alert('已到达底部');
				}
			});

			// Safari 浏览器不支持  behavior: "smooth"，用 requestAnimationFrame
			function scrollToTop() {
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 0) {
					window.requestAnimationFrame(scrollToTop);
					window.scrollTo(0, scrollTop - scrollTop / 8);
				}
			}
		</script>
	</body>
</html>
